﻿.m-progress-circular {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
    justify-content: center;
    align-items: center;
}

    .m-progress-circular > svg {
        width: 100%;
        height: 100%;
        margin: auto;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 0;
    }

.m-progress-circular--indeterminate > svg {
    -webkit-animation: progress-circular-rotate 1.4s linear infinite;
    animation: progress-circular-rotate 1.4s linear infinite;
    transform-origin: center center;
    transition: all 0.2s ease-in-out;
}

.m-progress-circular--indeterminate .m-progress-circular__overlay {
    -webkit-animation: progress-circular-dash 1.4s ease-in-out infinite;
    animation: progress-circular-dash 1.4s ease-in-out infinite;
    stroke-linecap: round;
    stroke-dasharray: 80, 200;
    stroke-dashoffset: 0px;
}

.m-progress-circular__info {
    align-items: center;
    display: flex;
    justify-content: center;
}

.m-progress-circular__underlay {
    stroke: rgba(158, 158, 158, 0.4);
    z-index: 1;
}

.m-progress-circular__overlay {
    stroke: currentColor;
    z-index: 2;
    transition: all 0.6s ease-in-out;
}
